<template>
  <div class="material-right">
    <el-row type="flex" :gutter="10" class="picture-wrap">
      <el-scrollbar style="width:100%;height: 100%;">
        <el-col v-if="nodata" :span="24">暂无素材</el-col>
        <el-checkbox-group v-else v-model="checked" @change="changeChecked">
          <el-col v-for="(_item, index) in datas" :key="index" :xs="12" :sm="8" :md="6" :lg="4" :xl="3">
            <div class="picture-item">
              <div class="figure">
                <el-image :src="_item.fileurl" fit="cover" :preview-src-list="srcList" />
                <div class="popover">
                  <el-popover placement="bottom-end" width="48" trigger="click">
                    <div class="popover-wrap">
                      <div v-if="permsPicRen" class="popover-con"><el-button type="text" size="mini" @click="setFilename(_item)">重命名</el-button></div>
                      <div v-if="permsPicDel" class="popover-con"><el-button type="text" size="mini" @click="deleteMaterial(_item)">删除</el-button></div>
                    </div>
                    <el-button slot="reference" type="text" size="mini" icon="el-icon-more" />
                  </el-popover>
                </div>
              </div>
              <div class="info">
                <el-checkbox :label="_item.id">
                  <el-tooltip class="item" effect="dark" :content="_item.filename" placement="bottom-start">
                    <div class="attach-title">{{ _item.filename }}</div>
                  </el-tooltip>
                </el-checkbox>
              </div>
            </div>
          </el-col>
        </el-checkbox-group>
      </el-scrollbar>
      <div v-if="!nodata" class="operation-wrapper">
        <div class="operation-placeholder" />
        <div class="operation-fixed">
          <el-row type="flex" justify="space-between">
            <div class="operation-left">
              <el-checkbox v-model="checkedAll" :indeterminate="indeterminate" size="mini" type="text" @change="toggleSelection()">全选</el-checkbox>
              <el-button v-if="permsPicDel" size="mini" plain @click="deleteSelected">批量删除</el-button>
              <el-button v-if="permsPicMov" size="mini" plain @click="moveSelected">移动到</el-button>
            </div>
            <div class="operation-right"><edu-pagination :loadpage="loadpage" :page-size="pageSize" /></div>
          </el-row>
        </div>
      </div>
    </el-row>
    <update-title v-if="visible" :visible.sync="visible" :item="item" @update:filename="$emit('update:filename', $event)" />
    <select-category-box v-if="selectCategoryVisible" @submit="moveMasterial" @update:visible="selectCategoryVisible = false" />
  </div>
</template>

<script>
import UpdateTitle from './update_title.vue';
import EduPagination from '@public/template/page_list/pagination.vue';
import SelectCategoryBox from './select_category.vue';

export default {
  components: {
    UpdateTitle,
    EduPagination,
    SelectCategoryBox
  },
  props: {
    datas: {
      type: Array,
      require: true,
      default: _ => {
        return [];
      }
    },
    recycle: {
      type: Boolean,
      default: false
    },
    pageSize: {
      type: Array,
      default: () => {
        return [10, 20, 50, 100];
      }
    }
  },
  data() {
    return {
      checked: [],
      checkedAll: false,
      visible: false,
      indeterminate: false,
      item: {},
      selectCategoryVisible: false
    };
  },
  computed: {
    nodata() {
      return !this.datas || this.datas.length == 0;
    },
    permsPicRen() {
      return this.hasPermission({
        permission: 'material.picture.rename'
      });
    },
    permsPicDel() {
      return this.hasPermission({
        permission: 'material.picture.delete'
      });
    },
    permsPicMov() {
      return this.hasPermission({
        permission: 'material.picture.move'
      });
    },
    // 预览列表
    srcList() {
      return this.datas.map((item) => item.fileurl)
    }
  },
  methods: {
    // 重命名
    setFilename: function(item) {
      this.visible = true;
      this.item = item;
    },
    // 删除
    deleteMaterial: function(item) {
      let txt = '确认移动到回收站吗';
      let uri = '/admin/material/' + item.id;
      if (this.recycle) {
        // 已经在回收站了
        txt = '删除后将无法找回素材，请谨慎操作';
        uri = '/admin/material/really/' + item.id;
      }
      this.$box
        .confirm(txt)
        .then(() => {
          this.$http.delete(
            uri,
            {},
            response => {
              this.$message.success(response.msg);
              this.$emit('reload');
            },
            error => {
              this.$message.error(error.msg);
            }
          );
        })
        .catch(() => {});
    },
    // 选中改变
    changeChecked: function(checked) {
      const length = checked.length;
      if (length > 0) {
        if (length == this.datas.length) {
          this.checkedAll = true;
          this.indeterminate = false;
        } else {
          this.checkedAll = false;
          this.indeterminate = true;
        }
      } else {
        this.checkedAll = false;
        this.indeterminate = false;
      }
    },
    // 全选/反选
    toggleSelection: function() {
      if (this.checked.length != this.datas.length) {
        var checked = [];
        this.datas.map(function(item) {
          checked.push(item.id);
        });

        this.checked = checked;
      } else {
        this.checked = [];
      }
      this.changeChecked(this.checked);
    },
    // 批量删除
    deleteSelected: function() {
      if (this.checked.length == 0) {
        this.$message.warning('请选择要删除的素材');
        return false;
      }

      const ids = this.checked.join(',');
      let txt = '确认移动到回收站吗';
      let uri = '/admin/material/' + ids;
      if (this.recycle) {
        // 已经在回收站了
        txt = '删除后将无法找回素材，请谨慎操作';
        uri = '/admin/material/really/' + ids;
      }
      this.$box
        .confirm(txt)
        .then(() => {
          this.$http.delete(
            uri,
            {},
            response => {
              this.$message.success(response.msg);
              this.$emit('reload');
            },
            error => {
              this.$message.error(error.msg);
            }
          );
        })
        .catch(() => {});
    },
    // 控制移动弹出层
    moveSelected: function() {
      if (this.checked.length == 0) {
        this.$message.warning('请选择要移动的素材');
        return false;
      }
      this.selectCategoryVisible = true;
    },
    // 移动分组
    moveMasterial: function(category) {
      this.$http.post(
        '/admin/material/move',
        {
          id: this.checked,
          category: category
        },
        response => {
          this.$message.success(response.msg, _ => {
            this.$emit('reload');
          });
        },
        error => {
          this.$message.error(error.msg);
        }
      );
    },
    loadpage: function() {
      this.$emit('reload');
    }
  }
};
</script>
<style lang="scss">
.el-popover {
  min-width: auto;
}
.popover-wrap {
  .popover-con {
    text-align: center;
  }
  .el-button {
    color: #606266;
    padding: 4px 2px;
  }
}
</style>
<style lang="scss" scoped>
.material-right {
  padding: 15px;
  flex: 1;
  margin-left: 15px;
  margin-right: 30px;
  border: 1px solid rgba(228, 231, 237, 1);
  .attach-title {
    text-overflow: ellipsis;
    overflow: hidden;
    width: 126px;
  }
  .el-checkbox-group {
    width: 100%;
    ::v-deep.el-checkbox__input.is-checked + .el-checkbox__label {
      color: #606266;
    }
  }
  .picture-wrap {
    padding: 0 5px;
    flex-wrap: wrap;
    height: calc(100vh - 295px);
    .picture-item {
      background: #f7f7f7;
      margin-bottom: 12px;
    }
    .figure {
      padding-top: 92px;
      height: 0;
      position: relative;
      .el-image {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }
      .popover {
        position: absolute;
        right: 5px;
        top: 5px;
        .el-button {
          color: #606266;
          padding: 0 4px;
          background-color: #fff;
        }
      }
    }
    .info {
      padding: 5px;
      .el-checkbox {
        display: flex;
        align-items: center;
      }
    }
  }
  .upload-picture {
    ::v-deep.el-upload--picture-card {
      width: 128px;
      height: 70px;
      line-height: 68px;
    }
    ::v-deep.el-upload-list--picture-card .el-upload-list__item {
      width: 128px;
      height: 70px;
    }
  }
}

.operation-wrapper {
  width: 100%;
  .operation-placeholder {
    height: 45px;
  }
  .operation-fixed {
    padding: 5px 30px 7px 20px;
    position: fixed;
    bottom: 0;
    left: 517px;
    right: 30px;
    z-index: 10;
    background-color: #fff;
    //border-top: 1px solid #e4e7ed;
    .operation-left {
      ::v-deep .el-checkbox {
        margin-right: 10px;
      }
    }
  }
}
</style>
